import React from 'react'
import PropTypes from 'prop-types';
import Bus from "../utils/events"
import {useState} from "react"
// css in js
const style = {
    display:"flex",
    justifyContent:"space-around" ,
    alignItems:" center"
}
function Top(props) {
  let [activeIndex,setActiveINDEX] =useState(0)
  console.log(props.arr);
  let fn = (index)=>{
    Bus.emit("send",index)
    setActiveINDEX(index)
  }
  return (
    <div style={style}>
        {
            props.arr && props.arr.length? props.arr.map((item,index)=>{
                return <div key={index} className={index===activeIndex?"active":""} onClick={()=>fn(index)}>{item.type}</div>
            }):"暂无数据"
        }
    </div>
  )
}
Top.propTypes = {
    arr: PropTypes.array
};
export default Top
